﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link href="../style/editor.css" rel="stylesheet" type="text/css">
    <script>
        var sLangDir = parent.oUtil.langDir;
        document.write("<scr" + "ipt src='language/" + sLangDir + "/webyoutube.js'></scr" + "ipt>");
    </script>
    <script>writeTitle()</script>
    <script src="jquery-1.7.min.js" type="text/javascript"></script>

    <!--Youtube-->
    <link href="tubeutil/default.css" rel="stylesheet" type="text/css" />
    <script src="tubeutil/tubeutil.js" type="text/javascript"></script>

	<script>
		document.write("<li"+"nk href=\"" + parent.oUtil.protocol + "//fonts.googleapis.com/css?family=Arvo\" rel=\"stylesheet\" type=\"text/css\" />");
    </script>

    <style type="text/css">
        #inpKeywords, #inpURL {
	        border:1px inset #ddd;
	        font-size:12px;
	        -moz-border-radius:3px;
	        -webkit-border-radius:3px;
	        padding-left:7px;
            }

        .item {width:120px;min-height:100px;display:-moz-inline-stack;display:inline-block;vertical-align:top;zoom:1; *display: inline; _height: 100px;
        margin:0px 15px 0px -5px;cursor:pointer;padding:10px;text-align:center;vertical-align:middle;}

        .item2 {width:120px;min-height:20px;display:-moz-inline-stack;display:inline-block;vertical-align:top;zoom:1; *display: inline; _height: 20px;
        background:#000;cursor:pointer;text-align:center;
        box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
        -moz-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
        -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.24);
        margin-left:-5px;margin-right:25px;margin-top:10px;margin-bottom:10px;
        border:#fff 1px solid;padding-top:15px;color:#fff
        }
    </style>

    <script src="common.js" type="text/javascript"></script>

    <script language="javascript" type="text/javascript">

        jQuery(document).ready(function ($) {
            renderEffect("images/sample-video.png");

            loadTxt(); /* language */
        });

        function renderEffect(src) {
            $("#box1").html("").attr("style", "background:none;");
            $("#box2").html("").attr("style", "background:none;");
            $("#box3").html("").attr("style", "background:none;");
            $("#box4").html("").attr("style", "background:none;");
            $("#box5").html("").attr("style", "background:none;");
            $("#box6").html("").attr("style", "background:none;");
            $("#box7").html("").attr("style", "background:none;");
            $("#box8").html("").attr("style", "background:none;");
            $("#box9").html("").attr("style", "background:none;");
            $("#box10").html("").attr("style", "background:none;");
            size = "t";
            $("<img/>").attr("src", src).attr("style", "").appendTo("#box1").click(function () {
                $("#box1").attr("style", "background:#e9ed03;-webkit-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px;");
                $("#box2").attr("style", "");
                $("#box3").attr("style", "");
                $("#box4").attr("style", "");
                $("#box5").attr("style", "");
                $("#box6").attr("style", "");
                $("#box7").attr("style", "");
                $("#box8").attr("style", "");
                $("#box9").attr("style", "");
                $("#box10").attr("style", "");
                $("#hidEffect").val(1);
            });
            $("<img/>").attr("src", src).attr("style", "border:#fff 7px solid;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);box-shadow:0 1px 4px rgba(0, 0, 0, 0.3)").appendTo("#box2").click(function () {
                $("#box1").attr("style", "");
                $("#box2").attr("style", "background:#e9ed03;-webkit-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px;");
                $("#box3").attr("style", "");
                $("#box4").attr("style", "");
                $("#box5").attr("style", "");
                $("#box6").attr("style", "");
                $("#box7").attr("style", "");
                $("#box8").attr("style", "");
                $("#box9").attr("style", "");
                $("#box10").attr("style", "");
                $("#hidEffect").val(2);
            });
            $("<img/>").attr("src", src).attr("style", "border:#fff 7px solid;-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);").appendTo("#box3").click(function () {
                $("#box1").attr("style", "");
                $("#box2").attr("style", "");
                $("#box3").attr("style", "background:#e9ed03;-webkit-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px;");
                $("#box4").attr("style", "");
                $("#box5").attr("style", "");
                $("#box6").attr("style", "");
                $("#box7").attr("style", "");
                $("#box8").attr("style", "");
                $("#box9").attr("style", "");
                $("#box10").attr("style", "");
                $("#hidEffect").val(3);
            });
            $("<img/>").attr("src", src).attr("style", "-webkit-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px;").appendTo("#box4").click(function () {
                $("#box1").attr("style", "");
                $("#box2").attr("style", "");
                $("#box3").attr("style", "");
                $("#box4").attr("style", "background:#e9ed03;-webkit-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px;");
                $("#box5").attr("style", "");
                $("#box6").attr("style", "");
                $("#box7").attr("style", "");
                $("#box8").attr("style", "");
                $("#box9").attr("style", "");
                $("#box10").attr("style", "");
                $("#hidEffect").val(4);
            });
            $("<img/>").attr("src", src).attr("style", "border:#fff 7px solid;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);-moz-border-radius:7px;border-radius:7px;").appendTo("#box5").click(function () {
                $("#box1").attr("style", "");
                $("#box2").attr("style", "");
                $("#box3").attr("style", "");
                $("#box4").attr("style", "");
                $("#box5").attr("style", "background:#e9ed03;-webkit-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px;");
                $("#box6").attr("style", "");
                $("#box7").attr("style", "");
                $("#box8").attr("style", "");
                $("#box9").attr("style", "");
                $("#box10").attr("style", "");
                $("#hidEffect").val(5);
            });
            $("<img/>").attr("src", src).attr("style", "border:#fff 7px solid;-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);-moz-border-radius:7px;border-radius:7px;").appendTo("#box6").click(function () {
                $("#box1").attr("style", "");
                $("#box2").attr("style", "");
                $("#box3").attr("style", "");
                $("#box4").attr("style", "");
                $("#box5").attr("style", "");
                $("#box6").attr("style", "background:#e9ed03;-webkit-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px;");
                $("#box7").attr("style", "");
                $("#box8").attr("style", "");
                $("#box9").attr("style", "");
                $("#box10").attr("style", "");
                $("#hidEffect").val(6);
            });
            $("<img/>").attr("src", src).attr("style", "float:right;margin-right:15px").attr("class", "reflect").appendTo("#box7").click(function () {
                $("#box1").attr("style", "");
                $("#box2").attr("style", "");
                $("#box3").attr("style", "");
                $("#box4").attr("style", "");
                $("#box5").attr("style", "");
                $("#box6").attr("style", "");
                $("#box7").attr("style", "background:#e9ed03;-webkit-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px;");
                $("#box8").attr("style", "");
                $("#box9").attr("style", "");
                $("#box10").attr("style", "");
                $("#hidEffect").val(7);
            });
            $("<img/>").attr("src", src).attr("style", "padding: 5px;border: solid 1px #ddd;").appendTo("#box8").click(function () {
                $("#box1").attr("style", "");
                $("#box2").attr("style", "");
                $("#box3").attr("style", "");
                $("#box4").attr("style", "");
                $("#box5").attr("style", "");
                $("#box6").attr("style", "");
                $("#box7").attr("style", "");
                $("#box8").attr("style", "background:#e9ed03;-webkit-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px;");
                $("#box9").attr("style", "");
                $("#box10").attr("style", "");
                $("#hidEffect").val(8);
            });
            $("<img/>").attr("src", src).attr("style", "padding: 5px;border: solid 1px #ddd;-webkit-border-radius: 50em;-moz-border-radius: 50em;border-radius: 50em;").appendTo("#box9").click(function () {
                $("#box1").attr("style", "");
                $("#box2").attr("style", "");
                $("#box3").attr("style", "");
                $("#box4").attr("style", "");
                $("#box5").attr("style", "");
                $("#box6").attr("style", "");
                $("#box7").attr("style", "");
                $("#box8").attr("style", "");
                $("#box9").attr("style", "background:#e9ed03;-webkit-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px;");
                $("#box10").attr("style", "");
                $("#hidEffect").val(9);
            });
            $("<img/>").attr("src", src).attr("style", "padding: 5px;border: solid 1px #ddd;-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5);box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5);").appendTo("#box10").click(function () {
                $("#box1").attr("style", "");
                $("#box2").attr("style", "");
                $("#box3").attr("style", "");
                $("#box4").attr("style", "");
                $("#box5").attr("style", "");
                $("#box6").attr("style", "");
                $("#box7").attr("style", "");
                $("#box8").attr("style", "");
                $("#box9").attr("style", "");
                $("#box10").attr("style", "background:#e9ed03;-webkit-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px;");
                $("#hidEffect").val(10);
            });

            $("#size1").css("background", "#000000");
            $("#size2").css("background", "#000000");
            $("#size3").css("background", "#000000");
            $("#size4").css("background", "#000000");
            $("#size5").css("background", "#000000");
            $("#size1").css("color", "#ffffff");
            $("#size2").css("color", "#ffffff");
            $("#size3").css("color", "#ffffff");
            $("#size4").css("color", "#ffffff");
            $("#size5").css("color", "#ffffff");
            $("#size1").click(function () {
                $("#size1").css("background", "#e9ed03");
                $("#size2").css("background", "#000000");
                $("#size3").css("background", "#000000");
                $("#size4").css("background", "#000000");
                $("#size5").css("background", "#000000");
                $("#size1").css("color", "#000000");
                $("#size2").css("color", "#ffffff");
                $("#size3").css("color", "#ffffff");
                $("#size4").css("color", "#ffffff");
                $("#size5").css("color", "#ffffff");
                $("#hidSize").val(1);
            });
            $("#size2").click(function () {
                $("#size1").css("background", "#000000");
                $("#size2").css("background", "#e9ed03");
                $("#size3").css("background", "#000000");
                $("#size4").css("background", "#000000");
                $("#size5").css("background", "#000000");
                $("#size1").css("color", "#ffffff");
                $("#size2").css("color", "#000000");
                $("#size3").css("color", "#ffffff");
                $("#size4").css("color", "#ffffff");
                $("#size5").css("color", "#ffffff");
                $("#hidSize").val(2);
            });
            $("#size3").click(function () {
                $("#size1").css("background", "#000000");
                $("#size2").css("background", "#000000");
                $("#size3").css("background", "#e9ed03");
                $("#size4").css("background", "#000000");
                $("#size5").css("background", "#000000");
                $("#size1").css("color", "#ffffff");
                $("#size2").css("color", "#ffffff");
                $("#size3").css("color", "#000000");
                $("#size4").css("color", "#ffffff");
                $("#size5").css("color", "#ffffff");
                $("#hidSize").val(3);
            });
            $("#size4").click(function () {
                $("#size1").css("background", "#000000");
                $("#size2").css("background", "#000000");
                $("#size3").css("background", "#000000");
                $("#size4").css("background", "#e9ed03");
                $("#size5").css("background", "#000000");
                $("#size1").css("color", "#ffffff");
                $("#size2").css("color", "#ffffff");
                $("#size3").css("color", "#ffffff");
                $("#size4").css("color", "#000000");
                $("#size5").css("color", "#ffffff");
                $("#hidSize").val(4);
            });
            $("#size5").click(function () {
                $("#size1").css("background", "#000000");
                $("#size2").css("background", "#000000");
                $("#size3").css("background", "#000000");
                $("#size4").css("background", "#000000");
                $("#size5").css("background", "#e9ed03");
                $("#size1").css("color", "#ffffff");
                $("#size2").css("color", "#ffffff");
                $("#size3").css("color", "#ffffff");
                $("#size4").css("color", "#ffffff");
                $("#size5").css("color", "#000000");
                $("#hidSize").val(5);
            });
        }

        $(function () {

            jQTubeUtil.init({
                key: 'AI39si5p9QjzNxwuV3f8XfO1P521aK58_tcFApd7APF4ipreYxow982XtbelGTAs5Qj9n_jfCkscIYAc6P8peVL0cHXDST-Wtw',
                orderby: 'viewCount',
                time: 'all_time',
                maxResults: 10
            });

            $('#inpKeywords').keyup(function () {
                var val = $(this).val();
                jQTubeUtil.suggest(val, function (response) {
                    var html = '';
                    for (s in response.suggestions) {
                        var sug = response.suggestions[s];
                        html += '<li><a href="#">' + sug + '</a></li>';
                    }
                    if (response.suggestions.length)
                        $('.autocomplete').html(html).fadeIn(500);
                    else
                        $('.autocomplete').fadeOut(500);
                });
            });


            $('#btnSearch').click(function () {
                show_videos();
                $('.autocomplete').fadeOut(500);

                $('.autocomplete').css('display', 'none');
                return false;
            });

            $('.autocomplete').find('a').live('click', function () {
                var text = $(this).text();
                $('.blocks').find('#inpKeywords').val(text);
                $('.autocomplete').fadeOut(500);
                show_videos();
                return false;
            });

            function show_videos() {
                $('#hidPage').val(1); /*Reset Paging*/

                var val = $('.blocks').find('#inpKeywords').val();
                var parametersObject = {
                    "q": val,
                    "start-index": document.getElementById("hidPage").value,
                    "max-results": 20
                }

                $('.videos').addClass('preloader').html('');
                jQTubeUtil.search(parametersObject, function (response) {
                    var html = '';
                    for (v in response.videos) {
                        var video = response.videos[v],
					    minutes = parseInt(video.duration / 60),
					    seconds = video.duration % 60;
                        html += '<li>';
                        html += '<p class="image"><a href="javascript:selectVideo(\'' + video.videoId + '\')">';
                        html += '<img src="' + video.thumbs[1].url + '" alt="' + video.title + '" title="' + video.title + '" style="width:120px;height:90px" />';
                        html += '</a></p>'
                        html += '<p class="entry"><a href="javascript:selectVideo(\'' + video.videoId + '\')">' + video.title + '</a>';
                        html += '<small>' + minutes + ':' + (seconds < 10 ? '0' + seconds : seconds) + '</small>';
                        html += '</p>';
                        html += '</li>';
                    }
                    $('.videos').removeClass('preloader').html(html);
                });
            }

        });

        function loadmore() {
            $('#hidPage').val($('#hidPage').val() * 1 + 1);

            var val = $('.blocks').find('#inpKeywords').val();
            var parametersObject = {
                "q": val,
                "start-index": $('#hidPage').val(),
                "max-results": 20
            }

            jQTubeUtil.search(parametersObject, function (response) {
                var html = '';
                for (v in response.videos) {
                    var video = response.videos[v],
					    minutes = parseInt(video.duration / 60),
					    seconds = video.duration % 60;
                    html += '<li>';
                    html += '<p class="image" id="' + video.videoId + '"><a href="javascript:selectVideo(\'' + video.videoId + '\')">';
                    html += '<img src="' + video.thumbs[1].url + '" alt="' + video.title + '" title="' + video.title + '" />';
                    html += '</a></p>'
                    html += '<p class="entry" id="' + video.videoId + '"><a href="javascript:selectVideo(\'' + video.videoId + '\')">' + video.title + '</a>';
                    html += '<small>' + minutes + ':' + (seconds < 10 ? '0' + seconds : seconds) + '</small>';
                    html += '</p>';
                    html += '</li>';
                }
                $('.videos').removeClass('preloader').append(html);
            });
        }

        function selectVideo(Id) {
            var sUrl = "http://www.youtube.com/watch?v=" + Id;
            $('#inpURL').val(sUrl);

            for (var i = 0; i < document.getElementById("videos").childNodes.length; i++) {
                if (document.getElementById("videos").childNodes[i].getElementsByTagName('a')[0].href.indexOf(Id) != -1) {
                    document.getElementById("videos").childNodes[i].getElementsByTagName('p')[0].style.background = "#e9ed03";
                }
                else {
                    document.getElementById("videos").childNodes[i].getElementsByTagName('p')[0].style.background = "#ffffff";
                }
            }
        }

        function I_Insert() {
            /* EFFECTS */
            var sCssText = "";var sSize = "";
            var nEff = $("#hidEffect").val();
            if (nEff == 1) {
                sCssText = "";
            }
            if (nEff == 2) {
                sCssText = "border:#fff 7px solid;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);box-shadow:0 1px 4px rgba(0, 0, 0, 0.3)";
            }
            if (nEff == 3) {
                sCssText = "border:#fff 7px solid;-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);";
            }
            if (nEff == 4) {
                sCssText = "-webkit-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px;";
            }
            if (nEff == 5) {
                sCssText = "border:#fff 7px solid;-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);-moz-border-radius:7px;border-radius:7px;";
            }
            if (nEff == 6) {
                sCssText = "border:#fff 7px solid;-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);-moz-border-radius:7px;border-radius:7px;";
            }
            if (nEff == 7) {

            }
            if (nEff == 8) {
                sCssText = "padding: 5px;border: solid 1px #ddd;";
            }
            if (nEff == 9) {
                sCssText = "padding: 5px;border: solid 1px #ddd;-webkit-border-radius: 50em;-moz-border-radius: 50em;border-radius: 50em;";
            }
            if (nEff == 10) {
                sCssText = "padding: 5px;border: solid 1px #ddd;-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5);box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5);";
            }

            sSize = " width=\"480\" height=\"390\" ";
            var nSize = $("#hidSize").val();
            if (nSize == 1) {
                sSize = " width=\"300\" height=\"225\" ";
            }
            if (nSize == 2) {
                sSize = " width=\"420\" height=\"315\" ";
            }
            if (nSize == 3) {
                sSize = " width=\"480\" height=\"390\" ";
            }
            if (nSize == 4) {
                sSize = " width=\"640\" height=\"480\" ";
            }
            if (nSize == 5) {
                sSize = " width=\"960\" height=\"720\" ";
            }
            var sEmbedUrl = "http://www.youtube.com/embed/" + getVideoId($('#inpURL').val());
            var sHTML = "<iframe style=\"" + sCssText + "\" title=\"YouTube video player\" " + sSize + " src=\"" + sEmbedUrl + "?wmode=transparent\" wmode=\"Opaque\" frameborder=\"0\" allowfullscreen></iframe>";

            //var sHTML = "<article style=\"" + sCssText + "\" class=\"flex-video\"><iframe " + sSize + " src=\"" + sEmbedUrl + "\"></iframe></article>";

            I_InsertHTML(sHTML)
        }

        function getVideoId(url) {
            if (url.match(/youtu\.be/gi)) {
                return url.replace(/^.*(youtu\.be\/)/gi, "");
            }
            return url.replace(/^.*((v\/)|(embed\/)|(watch\?))\??v?=?([^\&\?]*).*/, "$5");
        }

        var storeBgColor, storeColor;
        function over(me, hover) {
            storeBgColor = me.style.backgroundColor;
            if (!hover) me.style.backgroundColor = '#c90000';
            else me.style.backgroundColor = hover;
            storeColor = me.style.color;
            me.style.color = '#fff';
        }
        function out(me) {
            me.style.backgroundColor = storeBgColor;
            me.style.color = storeColor;
        }

        function tabClick(n) {
            if (n == 0) {
                $("#div0").css("display", "block");
                $("#tab0").css("background", "#fcfcfc");
                $("#div1").css("display", "none");
                $("#tab1").css("background", "#ccc");
                $("#div2").css("display", "none");
                $("#tab2").css("background", "#ccc");
            }
            if (n == 1) {
                $("#div0").css("display", "none");
                $("#tab0").css("background", "#ccc");
                $("#div1").css("display", "block");
                $("#tab1").css("background", "#fcfcfc");
                $("#div2").css("display", "none");
                $("#tab2").css("background", "#ccc");
            }
            if (n == 2) {
                $("#div0").css("display", "none");
                $("#tab0").css("background", "#ccc");
                $("#div1").css("display", "none");
                $("#tab1").css("background", "#ccc");
                $("#div2").css("display", "block");
                $("#tab2").css("background", "#fcfcfc");
            }
        }
    </script>

</head>
<body style="margin-top:12px;margin-left:10px">

<input id="hidPage" type="hidden" value="1" />
<input id="hidEffect" type="hidden" value="1" />
<input id="hidSize" type="hidden" value="1" />

<div id="tab0" onclick="tabClick(0)" style="float:left;font-family:Arvo;font-size:11px;text-shadow:1px 1px 1px rgba(255,255,255,0.6);color:#000;letter-spacing:1px;cursor:pointer;width:75px;min-height:15px;text-align:center;margin-bottom:0px;padding:3px;background:#fcfcfc;margin-left:22px;margin-top:7px">
    YOUTUBE
</div>
<div id="tab1" onclick="tabClick(1)" style="float:left;font-family:Arvo;font-size:11px;text-shadow:1px 1px 1px rgba(255,255,255,0.6);color:#000;letter-spacing:1px;cursor:pointer;width:75px;min-height:15px;text-align:center;margin-bottom:0px;padding:3px;background:#ccc;margin-left:5px;margin-top:7px">
    STYLES
</div>
<div id="tab2" onclick="tabClick(2)" style="float:left;font-family:Arvo;font-size:11px;text-shadow:1px 1px 1px rgba(255,255,255,0.6);color:#000;letter-spacing:1px;cursor:pointer;width:115px;min-height:15px;text-align:center;margin-bottom:0px;padding:3px;background:#ccc;margin-left:5px;margin-top:7px">
    DIMENSION
</div>

<div style="clear:left"></div>

<form class="blocks" action="#" method="get">
<table cellpadding="0" cellspacing="0" style="margin-left:7px;">
<tr>
<td>

    <div id="div0" style="color:#000;padding:0px;padding-right:0px;width:385px;height:390px;overflow:auto;border-top:none;background:#fcfcfc;">
        <div style="margin:22px;margin-left:15px;margin-right:0px">
            <input id="inpKeywords" type="text" style="width:230px;height:23px;"/>
            <input id="btnSearch" type="submit" value=" Search " class="inpBtn" style="width:90px;height:28px" />
            <ul class="reset autocomplete"></ul>

		    <ul id="videos" style="margin-left:-8px;margin-top:10px" class="reset videos"></ul>
            <div style="text-align:center;padding-bottom:20px;display:none;">
                <a id="lnkLoadMore" href="javascript:loadmore()" style="font-size:10pt">Load More</a>
            </div>

        </div>
    </div>

    <div id="div1" style="color:#000;padding:0px;padding-right:0px;width:385px;height:390px;overflow:auto;border-top:none;background:#fcfcfc;display:none;">
        <div style="margin:22px;margin-left:15px;margin-right:0px">

        <div id="box1" class="item">
        </div>
        <div id="box2" class="item">
        </div>
        <div id="box3" class="item">
        </div>
        <div id="box4" class="item">
        </div>
        <div id="box5" class="item">
        </div>
        <div id="box6" class="item">
        </div>
<!--        <div id="box7" class="item">
        </div>-->
        <div id="box8" class="item">
        </div>
<!--        <div id="box9" class="item">
        </div>-->
        <div id="box10" class="item">
        </div>

        </div>
    </div>

    <div id="div2" style="color:#000;padding:0px;padding-right:0px;width:385px;height:390px;overflow:auto;border-top:none;background:#fcfcfc;display:none;">
        <div style="margin:22px;margin-left:25px;margin-right:0px">

        <div id="size1" class="item2" onclick="" style="font-family:Arvo;width:60px;height:30px;font-size:12px;">
            300x225
        </div>
        <div id="size2" class="item2" onclick="" style="font-family:Arvo;width:70px;height:40px;font-size:12px;">
            420x315
        </div>
        <div id="size3" class="item2" onclick="" style="font-family:Arvo;width:110px;height:60px;font-size:18px;">
            480x360
        </div>
<!--        <div id="Div3" class="item2" onclick="" style="font-family:Arvo;width:130px;height:60px;font-size:24px;">
            640x360
        </div>-->
        <div id="size4" class="item2" onclick="" style="font-family:Arvo;width:130px;height:80px;font-size:24px;">
            640x480
        </div>
        <div id="size5" class="item2" onclick="" style="font-family:Arvo;width:150px;height:100px;font-size:32px;">
            960x720
        </div>

        </div>
    </div>

</td>
</tr>
<tr>
<td style="padding-left:20px;padding-top:15px;font-family:Arvo;letter-spacing:1px;text-shadow:1px 1px 1px rgba(255,255,255,0.6);color:#000;text-align:right" valign="top">

    <span id="lblUrl">URL:</span>
    <input id="inpURL" type="text" value="" style="width:300px;height:23px;"/>
    <br /><br />
    <input type="button" name=btnCancel id=btnCancel value="cancel" onclick="I_Close()" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'" style="width:120px;height:33px">
    <input type="button" name=btnInsert id=btnInsert value="insert" onclick="I_Insert();I_Close()" class="inpBtn" onmouseover="this.className='inpBtnOver';" onmouseout="this.className='inpBtnOut'" style="width:120px;height:33px">

</td>
</tr>
</table>
</form>

</body>
</html>
